<template>
  <div align="center" v-loading="isLoading">
    <div class="printHide">
      <br>
      <el-button class="ml-[15px]" size="small" @click="onPrint" >打印</el-button>
      <br>
      <br>
    </div>
    <div style="width:700px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <td align="center">
              <table width="100%" border="0" cellpadding="2" cellspacing="0">
                <colgroup>
                  <col width="10%">
                  <col width="39%">
                  <col width="2%">
                  <col width="10%">
                  <col width="39%">
                </colgroup>
                <tbody>
                  <tr>
                    <td class="printHugeBoldNormal" colspan="5" align="center"><u>入倉單</u></td>
                  </tr>
                  <tr>
                    <td class="printSmallNormal" align="left">編號&nbsp;:</td>
                    <td class="printSmallNormal" align="left">{{formData.number}}</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">日期&nbsp;:</td>
                    <td class="printSmallNormal" align="left">{{formData.create_time}}</td>
                  </tr>
                  <tr>
                    <td class="printSmallNormal" align="left">分校&nbsp;:</td>
                    <td class="printSmallNormal" align="left">{{formData.name}}</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">員工&nbsp;:</td>
                    <td class="printSmallNormal" align="left">{{username}}</td>
                  </tr>
                  <tr>
                    <td class="printSmallNormal" align="left">供應商&nbsp;:</td>
                    <td class="printSmallNormal" align="left">{{formData.name}}</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                    <td class="printSmallNormal" align="left">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="printSmallNormal" align="left">貨倉&nbsp;:</td>
                    <td class="printSmallNormal" colspan="4" align="left">{{formData.warehouse}}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center">
              <table width="100%" border="0" cellpadding="5" cellspacing="0">
                <colgroup>
                  <col width="5%"><!-- 次序 -->
                  <col width="15%"><!-- 編號 -->
                  <col width="25%"><!-- 名稱 -->
                  <col width="25%"><!-- 備註 -->
                  <col width="10%"><!-- 數量 -->
                  <col width="10%"><!-- 單價 -->
                  <col width="10%"><!-- 金額 -->
                </colgroup>
                <thead>
                  <tr>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;">次序</td>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;">編號</td>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;">名稱</td>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;">備註</td>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;">數量</td>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;">單價</td>
                    <td class="printSmallNormal" align="center" style="border-top:1px solid Black;border-bottom:3px double Black;border-left:1px solid Black;border-right:1px solid Black;">金額</td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="v,i in formData.detail" :key="i">
                    <td class="printSmallNormal" align="center" valign="top" style="border-left:1px solid Black;">{{++i}}</td>
                    <td class="printSmallNormal" align="left" valign="top" style="border-left:1px solid Black;">{{v.number}}</td>
                    <td class="printSmallNormal" align="left" valign="top" style="border-left:1px solid Black;">{{v.name}}</td>
                    <td class="printSmallNormal" align="left" valign="top" style="border-left:1px solid Black;">{{v.remark}}&nbsp;</td>
                    <td class="printSmallNormal" align="right" valign="top" style="border-left:1px solid Black;">{{v.num}}</td>
                    <td class="printSmallNormal" align="right" valign="top" style="border-left:1px solid Black;">${{v.cost}}</td>
                    <td class="printSmallNormal" align="right" valign="top" style="border-left:1px solid Black;border-right:1px solid Black;">${{v.num * v.cost}}</td>
                  </tr>
                  <tr>
                    <td class="printSmallNormal" colspan="4" align="right" style="border-top:1px solid Black;">總計&nbsp;:&nbsp;</td>
                    <td class="printSmallNormal" align="right" style="border-top:1px solid Black;border-bottom:1px solid Black;border-left:1px solid Black;">{{formData.detail.length}}</td>
                    <td class="printSmallNormal" align="right" style="border-top:1px solid Black;border-left:1px solid Black;">&nbsp;</td>
                    <td class="printSmallNormal" align="right" style="border-top:1px solid Black;border-bottom:1px solid Black;border-left:1px solid Black;border-right:1px solid Black;">${{allCost}}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue' 
import {useRoute} from 'vue-router'
  import {
    add,
    subtract,
    multiply,
    divide,
  } from 'high-precision-four-fundamental-rules';

const route = useRoute()
console.log(route);
const formData = ref(JSON.parse(route.query.data));
const username = ref(route.query.username)
console.log(formData.value);
const allCost = ref(0)
          formData.value.detail.forEach(item => {
          allCost.value =  add(allCost.value,multiply(Number(item.cost),Number(item.num),2),2);
          });


    const onPrint =()=> {
    setTimeout(() => {
        window.print()
    }, 200)
    }

</script>

<style lang='less'  scoped>
.formButton{
    width: 80px;
}
.printHugeBoldNormal {
	font-family: Arial;
	font-size: 16pt;
	font-weight: bold;
}
.printSmallNormal {
	font-family: Arial;
	font-size: 8pt;
}
</style>